<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>CodeDesk</title>
    <script src="jquery.js"></script>
    <link href="style.css" rel="stylesheet" />
    <link href="top_style.css" rel="stylesheet" />
    <link href="iconfont.css" rel="stylesheet" />
    <link href="CodeDesk.Desktop.Test.styles.css" rel="stylesheet" />
</head>
<body>
    <div id="layout-main">
        <div id="window-header">
            <div id="window-header-title">
                <img src="/icon.png" />
                <span class="title">CodeDesk</span>
            </div>
            <div id="window-header-drag" ondblclick="MaximizedRestore()">
            </div>
            <div id="window-header-tools">
                <i onclick="SystemBroswer()">
                    <span class="icon iconfont icon-infomation"></span>
                </i>
                <i onclick="SendCommand('Minimize')">
                    <span class="icon iconfont icon-minimize"></span>
                </i>
                <i onclick="MaximizedRestore()" id="Maximized">
                    <span class="icon iconfont icon-maximizing"></span>
                </i>
                <i onclick="MaximizedRestore()" id="Restore" style="display:none;">
                    <span class="icon iconfont icon-restore"></span>
                </i>
                <i onclick="SendCommand('Close')">
                    <span class="icon iconfont icon-close"></span>
                </i>

            </div>
        </div>
        <div style="flex-grow:1;">

            <ul>
                <li>
                    <button onclick="SendCommand('Maximized')">最大化</button>
                </li>
                <li>
                    <button onclick="SendCommand('Minimize')">最小化</button>
                </li>
                <li>
                    <button onclick="SendCommand('Restore')">还原</button>
                </li>
                <li>
                    <button onclick="SendCommand('Close')">关闭</button>
                </li>
                <li class="window-header-drag" style="background:red;width:300px;height:30px;user-select:none;color:white;-webkit-user-select:none;">
                    拖动红色部分
                </li>
                <li>
                    <button onclick="ShowMessage()">原生对话框</button>
                </li>
                <li>
                    <button onclick="ShowError()">原生错误对话框</button>
                </li>
                <li>
                    <button onclick="OpenDirectory()">选择目录</button>
                </li>
                <li>
                    <button onclick="OpenFile()">选择单个文件对话框</button>
                </li>
                <li>
                    <button onclick="OpenFiles()">选择多个文件对话框</button>
                </li>
                <li>
                    <button onclick="SaveFile()">保存文件对话框</button>
                </li>
                <li>
                    <button onclick="SystemBroswer()">系统浏览器</button>
                </li>
                <li>
                    <button onclick="CustomMessage()">自定义消息</button>
                </li>
                <li>
                    浏览器版本：<span id="BrowserVersion"></span>
                </li>
            </ul>
        </div>
    </div>
    <script src="_framework/blazor.webview.js"></script>
    <style>
        ul {
            list-style: none;
        }

            ul li {
                padding: 5px;
            }
    </style>

    <script>

        var IsHiddenRestore = true;
        function MaximizedRestore() {
            if (IsHiddenRestore) {
                IsHiddenRestore = false;
                SendCommand('Maximized');
            }
            else {
                IsHiddenRestore = true;
                SendCommand('Restore');
            }

            $("#Maximized").toggle();
            $("#Restore").toggle();
        }

        window.external.drag("#window-header-drag");

        window.external.drag(".window-header-drag");
        function SendCommand(command) {
            window.external.systemCommand(command);
        }
        function ShowError() {
            var option = { message: "具体错误信息", button: "OKCancel", caption: "自定义错误标题" };
            window.external.systemCommand("ShowError", option);
        }
        function SystemBroswer() {
            window.external.systemCommand("SystemBroswer", "http://www.codedesk.cn");
        }
        function ShowMessage() {
            var option = { message: "具体提示信息", button: "OKCancel", caption: "自定义提示标题" };
            window.external.systemCommand("ShowMessage", option);
        }
        function OpenDirectory() {
            window.external.systemCommand("OpenDirectory", "c:\\");
        }
        function OpenFile() {

            var option = { InitialDir: "d:\\", Filters: { "图片文件": "*.jpg", "文本文件": "*.txt" } };
            window.external.systemCommand("OpenFile", option);
        }
        function OpenFiles() {
            var option = { InitialDir: "d:\\", Filters: { "图片文件": "*.jpg", "文本文件": "*.txt" } };
            window.external.systemCommand("OpenFiles", option);
        }
        function SaveFile() {
            var option = { FileName: "aaa.jpg", InitialDir: "d:\\", Filters: { "图片文件": "*.jpg", "文本文件": "*.txt" } };
            window.external.systemCommand("SaveFile", option);
        }
        function CustomMessage() {
            window.external.sendMessage("这里是自定义消息");
        }
        SendCommand("BrowserVersion");
        window.external.receiveMessage((data) => {
            try {
                console.log(data)
                var value = JSON.parse(data);
                if (value.CommandName == 'BrowserVersion') {
                    $("#BrowserVersion").text(value.Data);
                }
                else if (value.CommandName == "ShowError" || value.CommandName == "ShowMessage") {
                    console.log(value.Data);
                }
                console.log(value);
            }
            catch (error) {

                console.log(data);
            }
        });
    </script>
</body>

</html>
